
<template>
	<div class="index">

		<div class="center">
			<left></left>
			<div class="right">
          <top></top>
          <!-- <div class="hei10"></div>
          <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">当前位置：分销后台>短信中心><router-link to="/duanxin/renwuguanli">任务管理</router-link></div>
          --><div class="hei10"></div>
				<div class="powertop">
					<router-link class="powertopli powertopact" to="/duanxin">任务管理</router-link>
					<router-link class="powertopli" to="/duanxin/addrenwu2">指定号码发送短信</router-link>
					<router-link class="powertopli" to="/duanxin/fasongjilu">发送记录</router-link>
					<router-link class="powertopli" to="/duanxin/duanxinmoban">短信模板管理</router-link>
				</div>
				<div class="conlist" v-loading='loading'>
          <div style="padding: 20px;">
            <div class="" style="background: #FFFBE6; border: 1px #FFE58F solid; border-radius: 10px; padding: 20px;">
              <div style="margin-bottom: 10px;  font-weight: bold;"><i class="el-icon-warning" style="color: #FFE58F; font-size: 20px; margin-right: 10px;"></i>原短信通道因发送敏感短信过多导致触达率过低，现已切换短信通道，为了提高触达率，新通道的短信模版将严格审核，为使切换顺利，需要您操作以下2点：</div>
              <div style="font-size: 14px; color: rgb(102, 102, 102); margin-bottom: 10px; padding-left: 33px;">1、 您之前创建的短信模版全部更改为待审核状态，请前往短信模版页重新修改后再次提交审核通过后才可发送。</div>
              <div style="font-size: 14px; color: rgb(102, 102, 102); padding-left: 33px;">2、 正在执行中的短信任务，请替换为“审核通过”的短信模版，未替换的任务将会在8月2号9:00被关闭执行。</div>
            </div>
            <div class="flex flexbt renguantop">
            	<div class="jiedian flex">
            		<div class="jiediand">短信发送节点</div>
            		<div class="jiedianx">功能描述：在订单进入下列任意环节均可自动触发短信联系用户</div>
            	</div>
            	<div class="duanxin flex">
            		<div class="duanxinn">短信余额：</div>
            		<div class="duanxinu">{{duanxintiaoshu}}条</div>
            		<el-button type="danger" round @click="go2('/duanxin/duanxinchongzhi')">充值短信</el-button>
            		<!-- <router-link to="/duanxin/duanxinchongzhi" class="duanxinb">充值短信</router-link> -->
            	</div>
            </div>
          </div>


          <div style=" padding: 20px;">
            <div style="background: rgb(249, 249, 249); height: 50px; line-height: 50px; " class="kflexbc">
              <div class="navli kflexcc" :class="imgs == 120?'act':''"  @click="changeimg(120)">
                <img src="../../../static/kuanping/duanxin1.svg" style="width: 25px; margin-right: 10px;">下单提醒
              </div>
              <div class="navli kflexcc" :class="imgs == 150?'act':''" @click="changeimg(150)">
                <img src="../../../static/kuanping/duanxin2.svg" style="width: 25px; margin-right: 10px;">照片未上传提醒
              </div>
              <div class="navli kflexcc" :class="imgs == -200?'act':''" @click="changeimg(-200)">
                <img src="../../../static/kuanping/duanxin3.svg" style="width: 25px; margin-right: 10px;">照片不合格通知
              </div>
			  <div class="navli kflexcc" :class="imgs == -451?'act':''" @click="changeimg(-451)">
                <img src="../../../static/kuanping/duanxin7.svg" style="width: 25px; margin-right: 10px;">初审失败
              </div>
              <div class="navli kflexcc" :class="imgs == -460?'act':''" @click="changeimg(-460)">
                <img src="../../../static/kuanping/duanxin4.svg" style="width: 25px; margin-right: 10px;">生产失败通知
              </div>
              <div class="navli kflexcc" :class="imgs == 550?'act':''" @click="changeimg(550)">
                <img src="../../../static/kuanping/duanxin5.svg" style="width: 25px; margin-right: 10px;">物流通知
              </div>
              <div class="navli kflexcc" :class="imgs == 0?'act':''" @click="changeimg(0)">
                <img src="../../../static/kuanping/duanxin6.svg" style="width: 25px; margin-right: 10px;">订单终止
              </div>
              <div class="navli kflexcc" :class="imgs == 700?'act':''" @click="changeimg(700)">
                <img src="../../../static/kuanping/duanxin8.svg" style="width: 25px; margin-right: 10px;">激活
              </div>
              <div class="navli kflexcc" :class="imgs == -999?'act':''" @click="changeimg(-999)">
                <img src="../../../static/kuanping/duanxin8.svg" style="width: 25px; margin-right: 10px;">外呼短信
              </div>
            </div>
          </div>

					<div class="flex flexbt renguantop">
						<div class="jiedian flex">
							<div class="jiediand">下单提醒任务</div>
						</div>
					</div>
					<div class="xinjianrenwu">
						<el-button type="primary" round plain  @click="go">+新建任务</el-button>
					</div>
					<div class="list listth flex">
						<div class="th">任务名称</div>
						<div class="th">短信内容</div>
						<div class="th">创建时间</div>
						<div class="th">最后修改时间</div>
						<div class="th">开启状态</div>
						<div class="th" style="flex: 1;">操作</div>
					</div>
					<div class="list listtd flex" v-for="item in list" :key="item.id">
						<div class="td">
							<el-tooltip effect="dark" popper-class="tooltip" placement="top">
								<div slot="content">{{item.name}}</div>
								<div>{{item.name}}</div>
							</el-tooltip>
						</div>
						<div class="td" style="overflow: hidden;">
							<el-tooltip effect="dark" popper-class="tooltip" placement="top">
								<div slot="content">{{item.content}}</div>
								<div style="cursor: pointer;">{{item.content}}</div>
							</el-tooltip>
						</div>
						<div class="td">{{item.created_at}}</div>
						<div class="td">{{item.updated_at}}</div>
						<div class="td">
							<el-switch v-model="item.status == 1 ? true : false"  @change="kaiguan(item.id,item.status)" active-color="rgb(8, 201, 160)"
							 inactive-color="#ff4949"></el-switch>
						</div>
						<div class="td" style="flex: 1;">
							<el-button size="mini" type="text" @click="see(item.id)">查看统计</el-button>
							<el-button size="mini" type="text" @click="fix(item.id)">修改</el-button>
							<el-button size="mini" type="text" style="color: #2974FF;" @click="del(item.id)">删除</el-button>
						</div>
					</div>
					<el-pagination style="text-align: right; padding: 20px;" background layout="total,prev, pager, next" :current-page="page"
					 @current-change="fanye" :page-size="pagesize" :total="total"></el-pagination>
				</div>
				<uses ref='uses'></uses>
			</div>
		</div>

		<!-- <foot></foot> -->
	</div>

</template>

<script>
	import axios from 'axios'
	import top from '@/components/top.vue'
	import left from '@/components/left.vue'
	import foot from '@/components/foot.vue'
	import use from '@/components/duanxin/use.vue'
	import moment from "moment";
	export default {
		components: {
			"left": left,
			"top": top,
			"foot": foot,
			"uses":use,
		},
		name: "renwuguanli",
		data() {
			return {

				loading: true,

				imgs: "120",
				list: "",
				duanxintiaoshu: 0,
				total: 0,
				pagesize: 20,
				page: 1,
			}
		},
		created() {

			if (this.$route.query.status) {
				this.imgs = this.$route.query.status.toString();
			}
			this.getlist();
			this.getmessagenumbers();
		},
		mounted() {

		},
		methods: {


			see:function(id){
        this.$router.push({
          path:'/duanxin/duanxintongji',
          query:{
            id:id
          }
        })
      },
			//翻页
			fanye: function(page) {
				this.loading = true
				this.page = page
				this.getlist()
			},
			//单个开关
			kaiguan: function(id, status) {
				var st
				var that = this
				if (status == 1) {
					st = 0
				} else {
					st = 1
				}
				this.loading = true
				axios.post('/api/plan-market/message/fixrenwu', {
						status: st,
						id: id
					})
					.then(response => {
						if (response.data.msg.code == 0) {
							that.getlist()
						} else {
							that.$message.error(response.data.msg.info);
						}
					})
			},
			//删除
			del: function(id) {
				this.$confirm('确定要删除此任务吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					var that = this;
					axios.post('/api/plan-market/message/deleterenwu', {
							id: id
						})
						.then(response => {
							if (response.data.msg.code == 0) {
								that.getlist()
							} else {
								if (response.data.msg.code == 50401) {
									that.$router.push({
										path: "/login"
									});
									return false
								}
								that.$message.error(response.data.msg.info);
							}
						})
				})
			},
			//跳转修改
			fix: function(id) {
				this.$router.push({
					path: '/duanxin/addrenwu',
					query: {
						id: id
					}
				})
			},
			go: function() {
				if(this.$refs.uses.use == false){
					this.$refs.uses.show = true
				}else{
					this.$router.push({
						path: '/duanxin/addrenwu',
						query: {
							status: this.imgs
						}
					})
				}

			},
			go2:function(url){
				if(this.$refs.uses.use == false){
					this.$refs.uses.show = true
				}else{
					this.$router.push({
						path: url
					})
				}
			},
			//选择状态类别
			changeimg: function(num) {
				this.imgs = num
				this.loading = true
				this.getlist()
			},
			//获取列表
			getlist: function() {
				var that = this
				axios.get('/api/plan-market/message/getrenwulist?order_status=' + this.imgs + '&page_size=20' + '&page=' + this.page)
					.then(response => {
						if (response.data.msg.code == 0) {
							that.list = response.data.data.data
							that.total = response.data.data.total
							setTimeout(()=>{
								that.loading = false
							},1000)

						} else {
							that.$message.error(response.data.msg.info);
						}
					})
			},
			//获取短信剩余条数
			getmessagenumbers: function() {
				var that = this
				axios.get('/api/plan-market/message/getmessagenumbers')
					.then(response => {
						if (response.data.msg.code == 0) {
							that.duanxintiaoshu = response.data.data.message_recharge
						} else {
							that.$message.error(response.data.msg.info);
						}
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index {

    /deep/ .el-button--danger {
        color: #FFF;
        background-color: #2974FF;
        border-color: #2974FF;
    }
    .act{
      color: #2974FF !important; background: #fff;
      img{
          filter: drop-shadow(#F1F8FF 1000px 0) !important;
          transform: translateX(-1000px);
      }
    }
    .navli{flex:1; color: rgb(158, 158, 158); cursor: pointer; overflow: hidden; border: 2px rgb(249, 249, 249) solid; border-bottom: 0;

      img{
        filter: drop-shadow(#C0C6D2 1000px 0);
        transform: translateX(-1000px);
      }

      &:hover {
        color: #2974FF !important; background: #fff;
        img{
            filter: drop-shadow(#F1F8FF 1000px 0);
            transform: translateX(-1000px);
        }
      }
    }

		img{max-width: 100%;}
		.center {


			.right {


				.title {
					border-bottom: 1px #EAEAEA solid;
					line-height: 45px;
					padding-left: 30px;
					font-size: 16px;
					background: #F9F9F9;
					color: #727272
				}
			}

			.powertop {
				display: flex;
				background:#f9f9f9;
			}

			.powertopli {
			  flex-basis: 180px;
			  line-height: 50px;
			  border-bottom: 3px #F9F9F9 solid;
			  color: #727272;
			  border-right: 1px #F9F9F9 solid;
			  font-size: 16px;
			  text-align: center;
			}

			.powertopact {
			  background: #FFFFFF;
			  border-bottom: 3px #2974FF solid;
			}
			.conlist {
				padding-bottom: 20px;
				background: #FFFFFF;
				min-height: 800px;

				.flex {
					display: flex;
				}

				.flexbt {
					justify-content: space-between;
				}

				.renguantop {
          background: rgb(249, 249, 249); padding: 15px 30px; margin-top: 20px;
					padding-bottom: 10px;


          .jiedian{

          }
					.jiediand {
						font-size: 16px;
						line-height: 30px;
						margin-right: 20px;
					}

					.jiedianx {
						font-size: 13px;
						color: #2974FF;
						line-height: 35px;
					}

					.duanxinn {
						color: #B8B8B8;
						line-height: 35px;
						margin-right: 10px;
					}

					.duanxinu {
						color: #DF3434;
						line-height: 35px;
						margin-right: 10px;
					}

					.duanxinb {
						background: #EEF7FF;
						line-height: 35px;
						color: #FFFFFF;
						padding: 0 10px;
						border-radius: 3px;

						a {
							color: #FFFFFF
						}
					}
				}

				.xinjianrenwu {
					padding: 20px;
				}

				.list {
					text-align: center; padding: 0 20px;
					line-height: 60px;

					.th {
						flex: 1;
						background: rgb(246, 246, 246);
            color: rgb(86, 86, 86); font-size: 14px; line-height: 45px;
					}

					.td {
						flex: 1;
						border-bottom: 1px #EAEAEA solid;
						height: 60px;
            line-height: 60px;
						overflow: hidden; font-size: 14px;
					}
				}

				.flexm {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-wrap: wrap;

					div {
						flex-basis: 88px;
						text-align: center;
						font-size: 14px;

						img {
							width: 100%;
							margin-bottom: 10px;
						}
					}

				}

				.flexx {
					margin: 0 10px;

					img {
						width: 46px;
						height: 15px;
					}
				}

				.flexact {
					div {
						color: #f00
					}
				}
			}
		}
	}
</style>
